<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/common.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/jquery.js'}"></script>
    <link th:href="@{${session.baseUrl}+'style/reset.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/base.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/header.css'}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" th:href="@{${session.baseUrl}+'style/phone.css'}"/>
    <link th:href="@{${session.baseUrl}+'style/dialog.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/global.css'}" rel="stylesheet" type="text/css">
    <script th:src="@{${session.baseUrl}+'js/dialog.js'}"></script>
    <title>更改银行账号</title>
    <style>
        .sub {
            display: block;
            width: 6.3rem;
            line-height: 0.77rem;
            font-size: 0.26rem;
            color: #fff;
            background: #2d9cff;
            margin: 0 auto;
            border-radius: 0.1rem;
        }
    </style>
</head>
<body>
<header><span onclick="javascript:history.go(-1)"></span>更改银行账号</header>
<div style="margin-left: 75px;margin-top: 20px;">
   <!-- <input id="bankphoneradio" type="radio" name="banknum" style="margin-left: -0.5rem;" checked/><span style="margin-top: -0.3rem;margin-left: 0rem;font-size: 15px;color: #2d9cff">手机接收验证码</span>-->
   <!-- <input id="bankmailradio" type="radio" name="banknum" style="margin-left: 30px;"/><span style="font-size: 15px;color: #2d9cff">邮箱接收验证码</span>-->
</div>
<div id="bankphonediv">
    <form action="">
        <ul>
            <li><input id="mail1" type="text" disabled th:value="${user.phone}"/></li>
            <li><input id="bank1" type="text" onfocus="document.getElementById('span').innerHTML=''" minlength="16"
                       maxlength="23" placeholder="请输入新的银行账号" onblur="phoneyanzheng1()"/></li>
            <li><input type="text" name="bankName" readonly="readonly" placeholder="银行名称（输入卡号自行匹配）" id="bankname1"></li>
            <li><input id="yanzhengma1" type="text" onfocus="document.getElementById('span').innerHTML=''"
                       placeholder="请输入手机验证码" onblur="yanMail1()"/><input type="button" class="get" value="获取验证码" id="confirm" onclick="sendcode()"/>
            </li>
            <li><span id="span1"></span></li>
            <li><input class="sub" type="button" value="更改" onclick="update($('#bank1').val(),$('#bankname1').val())"/></li>

        </ul>
    </form>

    <input id="num1" type="hidden">
</div>
<div id="bankmaildiv" style="display: none">
    <form action="">
        <ul>
            <li><input id="mail" type="text" disabled th:value="${user.infoV}"/></li>
            <li><input id="bank" type="text" onfocus="document.getElementById('span').innerHTML=''" minlength="16"
                       maxlength="23" placeholder="请输入新的银行账号" onblur="phoneyanzheng()"/></li>
            <li><input type="text" name="bankName" readonly="readonly" placeholder="输入卡号自行匹配" id="bankname"></li>
            <li><input id="yanzhengma" type="text" onfocus="document.getElementById('span').innerHTML=''"
                       placeholder="请输入邮箱验证码" onblur="yanMail()"/><span class="get" onclick="sendmail()">获取验证码</span>
            </li>
            <li><span id="span"></span></li>
            <li><input class="sub" type="button" value="更改" onclick="update($('#bank').val(),$('#bankname').val())"/></li>

        </ul>
    </form>

    <input id="num" type="hidden">
</div>
<script type="text/javascript" th:inline="javascript">
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;


    /** 银行卡4位一空*/
    window.onload = function () {
        var oT = document.getElementById('bank');
        oT.onkeydown = function (ev) {
            var oW = oT.value;
            var oEvent = ev || event;
            if (oEvent.keyCode == 8) {
                if (oW) {
                    for (var i = 0; i < oW.length; i++) {
                        var newStr = oW.replace(/\s$/g, '');
                    }
                    oT.value = newStr
                }
            } else {
                for (var i = 0; i < oW.length; i++) {
                    var arr = oW.split('');

                    if ((i + 1) % 5 == 0) {
                        arr.splice(i, 0, ' ');
                    }
                }
                oT.value = arr.join('');
            }
        }
    };

    window.onload = function () {
        var oT = document.getElementById('bank1');
        oT.onkeydown = function (ev) {
            var oW = oT.value;
            var oEvent = ev || event;
            if (oEvent.keyCode == 8) {
                if (oW) {
                    for (var i = 0; i < oW.length; i++) {
                        var newStr = oW.replace(/\s$/g, '');
                    }
                    oT.value = newStr
                }
            } else {
                for (var i = 0; i < oW.length; i++) {
                    var arr = oW.split('');

                    if ((i + 1) % 5 == 0) {
                        arr.splice(i, 0, ' ');
                    }
                }
                oT.value = arr.join('');
            }
        }
    };


    function sendmail() {
        var mail = $("#mail").val();
        $.ajax({
            url: basePath + '/memberSendMail/send',
            type: "get",
            dataType: "JSON",
            data: {
                accept: mail,
                type: '修改银行账号',
                text: '您正在修改银行账号，您的验证码是：'
            },
            contentType: 'application/json;charset=UTF-8',
            //async: false,
            success: function (data) {
                if (data != null) {
                    $("#num").val(data);

                }

            }
        })
    }


    var flag = 2;

    function yanMail() {
        var num = $("#num").val();
        var namespan = $("#span");
        var inputNum = $("#yanzhengma").val();
        if (inputNum == "") {
            namespan.html('验证码不能为空').css('color', '#ff2525');
            flag = 2;
        } else if (num != inputNum) {
            flag = 3;
        } else {
            namespan.html(' ');
            flag = 1;
        }

    }

    function yanMail() {
        var num = $("#num1").val();
        var namespan = $("#span1");
        var inputNum = $("#yanzhengma1").val();
        if (inputNum == "") {
            namespan.html('验证码不能为空').css('color', '#ff2525');
            flag = 2;
        } else if (num != inputNum) {
            flag = 3;
        } else {
            namespan.html(' ');
            flag = 1;
        }

    }

    var pflag = 2;

    //手机号码验证
    function phoneyanzheng() {
        var namespan = $("#span");
        var newphone = $("#bank").val();
        if (newphone == '') {
            namespan.html('银行账号不能为空').css('color', '#ff2525');
            pflag = 2;
        } else {
            namespan.html(' ');
            pflag = 1;
        }

    }

    function phoneyanzheng1() {
        var namespan = $("#span1");
        var newphone = $("#bank1").val();
        if (newphone == '') {
            namespan.html('银行账号不能为空').css('color', '#ff2525');
            pflag = 2;
        } else {
            namespan.html(' ');
            pflag = 1;
        }

    }


    function update(newBankaccount,newBankname) {
        var namespan = $("#span");
        if (flag == 2) {
            namespan.html('验证码不能为空').css('color', '#ff2525');
        } else if (pflag == 2) {
            namespan.html('银行账号不能为空').css('color', '#ff2525');
        } else if (flag == 3) {
            namespan.html('验证码不正确').css('color', '#ff2525');
        } else if (flag == 1 && pflag == 1) {
            namespan.html(' ')
            $.ajax({
                url: basePath + '/wap/memberUser/updateBankaccount',
                type: "get",
                dataType: "JSON",
                data: {
                    newBankaccount: newBankaccount,
                    newBankname: newBankname
                },
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {
                    if (data.msg == "ok") { //
                        $('body').dailog({type: 'success', title: '更改银行账号', discription: '更改成功'});
                        self.setInterval(function () {
                            window.location.href = basePath + "/wap/personal.html";
                        }, 2000)
                    } else if (data.msg == "no") {
                        $('body').dailog({type: 'warning', title: '更改银行账号', discription: '更改失败'});
                        self.setInterval(function () {
                            location.reload();
                        }, 2000)
                    }

                }
            })
        }
    }

    //改银行卡账户时更改验证方式
    $("#bankphoneradio").change(function () {
        document.getElementById("bankphonediv").style.display = "block";
        document.getElementById("bankmaildiv").style.display = "none";
    });
    $("#bankmailradio").change(function () {
        document.getElementById("bankphonediv").style.display = "none";
        document.getElementById("bankmaildiv").style.display = "block";
    });
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数


    function sendcode() {
        curCount = count;
        var span = $("#span1");

        //设置button效果，开始计时
        $("#confirm").attr("disabled", "true");
        $("#confirm").css("color", '#f6f6f6');
        $("#confirm").css("background", '#999999');
        $("#confirm").val( + curCount + "秒再获取");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
        $.ajax({
            url: basePath + '/memberSendSms/sms',
            type: "get",
            dataType: "JSON",
            data: {
                PhoneNumbers: $("#mail1").val(),
                //模板码是测试用的错的，SMS_171358608是真的
                TemplateCode: "SMS_171358608",
            },
            success: function (e) {
                if (e.msg == "OK") {
                    span.html('发送成功').css('color', '#33FF00');
                    $("#num1").val(e.data);
                } else {
                    span.html('发送失败').css('color', '#ff2525');
                }

            }
        })
    }
    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#confirm").removeAttr("disabled");//启用按钮
            $("#confirm").css("color", '#fff');
            $("#confirm").css("background", '#2d9cff');
            $("#confirm").val("重新发送验证码");
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
        }
        else {
            curCount--;
            $("#confirm").val( + curCount + "秒再获取");
        }
    }

    function getJson(key) {

        //1、使用eval方法
        var eValue = eval('bankList.' + key);
        $("#bankname").val(eValue);
    }


    //银行卡验证
    $("#bank").blur(function () {
        var value = $(this).val(); //获取当前输入框的值
        value = value.replace(/\s+/g, "");
        $.post("https://ccdcapi.alipay.com/validateAndCacheCardInfo.json", {
            cardNo: value,
            cardBinCheck: 'true'
        }, function (res) {
            console.log(res); //不清楚返回值的打印出来看
            //{"cardType":"DC","bank":"ICBC","key":"622200****412565805","messages":[],"validated":true,"stat":"ok"}
            if (res.validated) {

                getJson(res.bank);
                return true;
            } else {
                $("#bankmsg").html("银行卡号错误").css('color', '#ff2525');

                return false;
            }
        }, 'json');
    });

    //银行卡验证
    $("#bank1").blur(function () {
        var value = $(this).val(); //获取当前输入框的值
        value = value.replace(/\s+/g, "");
        $.post("https://ccdcapi.alipay.com/validateAndCacheCardInfo.json", {
            cardNo: value,
            cardBinCheck: 'true'
        }, function (res) {
            if (res.validated) {
                getJson(res.bank);
                return true;
            } else {
                $("#bankmsg").html("银行卡号错误").css('color', '#ff2525');

                return false;
            }
        }, 'json');
    });

    //银行及其简称，注意数组式json格式哈，取值方法略需修改
    var bankList =
        {
            PSBC: "中国邮政储蓄银行",
            ICBC: "中国工商银行",
            ABC: "中国农业银行",
            BOC: "中国银行",
            CCB: "中国建设银行",
            COMM: "中国交通银行",
            CMB: "招商银行",
            CMBC: "中国民生银行",
            CEB: "中国光大银行",
            CITIC: "中信银行",
            HXBANK: "华夏银行",
            SPABANK: "深发/平安银行",
            CIB: "兴业银行",
            SHBANK: "上海银行",
            SPDB: "浦东发展银行",
            GDB: "广发银行",
            BOHAIB: "渤海银行",
            GCB: "广州银行",
            JHBANK: "金华银行",
            WZCB: "温州银行",
            HSBANK: "徽商银行",
            JSBANK: "江苏银行",
            NJCB: "南京银行",
            NBBANK: "宁波银行",
            BJBANK: "北京银行",
            BJRCB: "北京农村商业银行",
            HSBC: "汇丰银行",
            SCB: "渣打银行",
            CITI: "花旗银行",
            HKBEA: "东亚银行",
            GHB: "广东华兴银行",
            SRCB: "深圳农村商业银行",
            GZRCU: "广州农村商业银行股份有限公司",
            DRCBCL: "东莞农村商业银行",
            BOD: "东莞市商业银行",
            GDRCC: "广东省农村信用社联合社",
            DSB: "大新银行",
            WHB: "永亨银行",
            DBS: "星展银行香港有限公司",
            EGBANK: "恒丰银行",
            TCCB: "天津市商业银行",
            CZBANK: "浙商银行",
            NCB: "南洋商业银行",
            XMBANK: "厦门银行",
            FJHXBC: "福建海峡银行",
            JLBANK: "吉林银行",
            HKB: "汉口银行",
            SJBANK: "盛京银行",
            DLB: "大连银行",
            BHB: "河北银行",
            URMQCCB: "乌鲁木齐市商业银行",
            SXCB: "绍兴银行",
            CDCB: "成都商业银行",
            FSCB: "抚顺银行",
            ZZBANK: "郑州银行",
            NXBANK: "宁夏银行",
            CQBANK: "重庆银行",
            HRBANK: "哈尔滨银行",
            LZYH: "兰州银行",
            QDCCB: "青岛银行",
            QHDCCB: "秦皇岛市商业银行",
            BOQH: "青海银行",
            TZCB: "台州银行",
            CSCB: "长沙银行",
            BOQZ: "泉州银行",
            BSB: "包商银行",
            DAQINGB: "龙江银行",
            SHRCB: "上海农商银行",
            ZJQL: "浙江泰隆商业银行",
            H3CB: "内蒙古银行",
            BGB: "广西北部湾银行",
            GLBANK: "桂林银行",
            DAQINGB: "龙江银行",
            CDRCB: "成都农村商业银行",
            FJNX: "福建省农村信用社联合社",
            TRCB: "天津农村商业银行",
            JSRCU: "江苏省农村信用社联合社",
            SLH: "湖南农村信用社联合社",
            JXNCX: "江西省农村信用社联合社",
            SCBBANK: "商丘市商业银行",
            HRXJB: "华融湘江银行",
            HSBK: "衡水市商业银行",
            CQNCSYCZ: "重庆南川石银村镇银行",
            HNRCC: "湖南省农村信用社联合社",
            XTB: "邢台银行",
            LPRDNCXYS: "临汾市尧都区农村信用合作联社",
            DYCCB: "东营银行",
            SRBANK: "上饶银行",
            DZBANK: "德州银行",
            CDB: "承德银行",
            YNRCC: "云南省农村信用社",
            LZCCB: "柳州银行",
            WHSYBANK: "威海市商业银行",
            HZBANK: "湖州银行",
            BANKWF: "潍坊银行",
            GZB: "赣州银行",
            RZGWYBANK: "日照银行",
            NCB: "南昌银行",
            GYCB: "贵阳银行",
            BOJZ: "锦州银行",
            QSBANK: "齐商银行",
            RBOZ: "珠海华润银行",
            HLDCCB: "葫芦岛市商业银行",
            HBC: "宜昌市商业银行",
            HZCB: "杭州商业银行",
            JSBANK: "苏州市商业银行",
            LYCB: "辽阳银行",
            LYB: "洛阳银行",
            JZCBANK: "焦作市商业银行",
            ZJCCB: "镇江市商业银行",
            FGXYBANK: "法国兴业银行",
            DYBANK: "大华银行",
            DIYEBANK: "企业银行",
            HQBANK: "华侨银行",
            HSB: "恒生银行",
            LSB: "临沂商业银行",
            YTCB: "烟台商业银行",
            QLB: "齐鲁银行",
            BCCC: "BC卡公司",
            CYB: "集友银行",
            TFB: "大丰银行",
            AEON: "AEON信贷财务亚洲有限公司",
            MABDA: "澳门BDA"
        }

</script>
</body>
</html>
